<template>
  <bsCard v-loading="loading" class="payDistribution-wrapper" :width="getBsLRWPercent(415)" :height="`${cardHeight}px`">
    <div class="bs-card-title">居民支出分布</div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getResidentExpenditure } from '@/api/bigscreen'
export default {
  name: 'payDistribution',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOption: {
        tooltip: {},
        series: [
          {
            type: 'funnel',
            left: '0',
            top: '20',
            bottom: 20,
            width: '100%',
            sort: 'ascending',
            gap: 2,
            label: {
              show: true,
              position: 'inside',
              textBorderColor: 'transparent',
              fontSize: 16
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getResidentExpenditure()
        if (res.resultCode === 200) {
          this.renderData(res.resultData || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data){
      this.echartsOption.series[0].data = data.map((per)=>{
        return {
          value: per.itemValue,
          name: `${per.indexName} ${per.itemValueZf}%`
        }
      })
    }
  }
}
</script>

<style lang='scss'>
.payDistribution-wrapper {
}
</style>

